<template>
  <div class="laterStyle">
    <div class="laterStyle_item">
      <div class="later_id">1</div>
      <div class="later_num">待放入项目</div>
      <div class="later_progress">
        <n-progress type="line" status="success" :percentage="20" :height="15">
          5
        </n-progress>
      </div>
    </div>

    <div class="laterStyle_item_T">
      <div class="later_id">2</div>
      <div class="later_num">管控中项目</div>
      <div class="later_progress">
        <n-progress type="line" status="success" :percentage="30" :height="15">
          10
        </n-progress>
      </div>
    </div>

    <div class="laterStyle_item_Th">
      <div class="later_id">3</div>
      <div class="later_num">管护结束项目</div>
      <div class="later_progress">
        <n-progress type="line" status="success" :percentage="40" :height="15">
          15
        </n-progress>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.laterStyle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .laterStyle_item {
    height: 38px;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;

    .later_id {
      width: 38px;
      height: 100%;
      background-image: url("../../../../assets/lingshui/u96.svg");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 18px;
    }

    .later_num {
      color: #FFB726;
      font-size: 16px;
      font-weight: 400;
      display: flex;
      align-items: center;
      // border: 1px solid red;
    }

    .later_progress {
      display: flex;
      align-items: center;
      height: 100%;
      width: 200px;
      // border: 1px solid red;
      color: #FFFFFF;
      font-size: 14px;
    }
  }

  .laterStyle_item_T {
    height: 38px;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;

    .later_id {
      width: 38px;
      height: 100%;
      background-image: url("../../../../assets/lingshui/u105.svg");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 18px;
    }

    .later_num {
      color: #00B8F8;
      font-size: 16px;
      font-weight: 400;
      display: flex;
      align-items: center;
      // border: 1px solid red;
    }

    .later_progress {
      display: flex;
      align-items: center;
      height: 100%;
      width: 200px;
      // border: 1px solid red;
      color: #FFFFFF;
      font-size: 14px;
    }
  }

  .laterStyle_item_Th {
    height: 38px;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;

    .later_id {
      width: 38px;
      height: 100%;
      background-image: url("../../../../assets/lingshui/u95.svg");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 18px;
      // border: 1px solid red;

    }

    .later_num {
      color: #99CC33;
      font-size: 14x;
      font-weight: 400;
      display: flex;
      align-items: center;
      // border: 1px solid red;
    }

    .later_progress {
      display: flex;
      align-items: center;
      height: 100%;
      width: 200px;
      // border: 1px solid red;
      color: #FFFFFF;
      font-size: 14px;
    }
  }
}
</style>